<template>
  <div class="container">

    <div class="winning">
      <div v-if="luckDrawData.join_info !== null">
        <div class="winningWap" v-if="luckDrawData.join_info.winning==1">
          <text class="winningIip">{{luckDrawData.join_info.winning_desc}}</text>
          <img v-if="luckDrawData.join_info.winning_img_url != null" :src="luckDrawData.join_info.winning_img_url" class="winningImg"/>
          <!-- <open-data type="userAvatarUrl" class="winningImg"></open-data> -->
          <div class="exchangeMode">
            <div class="exchangeTitle">兑换方式:</div>
            <div class="exchangeRule">
                1、复制兑换码<br/>
                2、复制淘口令，登录网页版/手机TaoBao，将兑换码发给淘宝小客服。<br/>
                3、若有其他问题可以咨询淘宝小客服。
            </div>
            <div class="exchangeCode" @click="copyRedem">{{luckDrawData.join_info.redem_code}}</div>
            <div class="exchangeCodeTip" @click="copyRedem">》点击复制兑换码《</div>
            <div class="exchangeCode" @click="copyTaobao">{{luckDrawData.join_info.taobao_code}}</div>
            <div class="exchangeCodeTip" @click="copyTaobao">》点击复制淘口令《</div>
          </div>
        </div>
        <div class="winningWap" v-else>
          <!--<img src="http://file.rzkeji.com/web/loveciy/img/customer/wechat.png" class="winningImg"/>-->
         <!--  <open-data type="userAvatarUrl" class="winningImg"></open-data>
          <div class="winningIip">很遗憾 你没中奖</div> -->
          <text class="winningIip">{{luckDrawData.join_info.winning_desc}}</text>
          <img v-if="luckDrawData.join_info.winning_img_url != null" :src="luckDrawData.join_info.winning_img_url" class="winningImg"/>
        </div>
      </div>

      <div class="winners">
        <div class="winners_title">恭喜下面{{luckDrawData.winning_num}}位中奖者</div>
        <div class="winners_list">中奖者名单</div>
        <ul class="winners_content">
          <li v-for="(value,index) in winnersList">
            <img :src="value.img_url" class="winners_img"/>
            <span class="winners_name">{{value.nickname}}</span>
          </li>
        </ul>
        <div class="winners_check" @click="lookmore">查看全部中奖名单 ></div>
      </div>
    </div>

  </div>
</template>

<script>
import process from "./process";
export default {
  props:['luckDrawData'],
  components: {
    process
  },
  data () {
    return {

    }
  },
  computed:{
    listId(){
      return this.$store.state.modulesLuck.listId
    },
    winnersList(){
      if(this.luckDrawData.winning_img_list!=undefined){
        return this.luckDrawData.winning_img_list.slice(0,10)   //最多显示10个人的头像
      }

    }
  },
  methods:{
    copyRedem(){
      this.$currency.copyText(this.luckDrawData.join_info.redem_code);
    },
    copyTaobao(){
      this.$currency.copyText(this.luckDrawData.join_info.taobao_code);
    },
    lookmore(){
      wx.navigateTo({
        url:`../imagesDetails/main?id=${this.listId}&type=winning`
      })
    }
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;}
.winning{width: 91.9%;border:0.3px solid #CCCCCC;margin-left: 4%;padding-bottom: 30px;}
.winningWap{width: 80%;margin-left: 10%;border-bottom: 0.5px solid #CCCCCC;padding-bottom: 15px;}
.winningImg{width: 100%;height: 120px; display: block;margin-top: 10px;margin-bottom: 20px}
.winningIip{width: 100%;text-align: center;line-height: 16.5px;color: #FE2D54;font-size: 14px;display: block;margin-top: 20px}
.exchangeMode{width: 100%;}
.exchangeTitle{width: 100%;height: 21px;font-size: 14px;color: #333;line-height: 21px;}
.exchangeRule{width: 100%;line-height: 21px;color: #999;font-size: 14px;}
.exchangeCode{width: 52.7%;height: 29px;margin-left: 23.65%;border-radius: 20px;background-color: #333333;color:#fff;font-size: 14px;text-align: center;line-height: 29px;margin-top: 30px;}
.exchangeCodeTip{width: 52.7%;height: 29px;margin-left: 23.65%;color: #999999;font-size: 14px;text-align: center;line-height: 29px;margin-top: 2px;}
.winners{width: 80%;margin-left: 10%;padding-top: 20px;}
.winners_title{width: 100%;height: 16.5px;font-size: 14px;color: #FE2D54;text-align: center;line-height: 16.5px;}
.winners_list{width: 100%;height: 16.5px;font-size: 14px;color: #09A110;text-align: center;line-height: 16.5px;display: flex;justify-content: row;margin-top: 15px;}

.winners_list:before {content: '';width: 84px;height: 1px;background-color: #CCCCCC;display: block;margin-top: 7.75px;margin-right: 15px;}
.winners_list:after {content: '';width: 84px;height: 1px;background-color: #CCCCCC;display: block;margin-top: 7.75px;margin-left: 15px;}
.winners_content{width: 100%;height: 66.5px;display: flex;justify-content: row;overflow: hidden;margin-top: 15px;}
.winners_content li{width: 45px;height: 100%;margin-right: 12px;}
.winners_content li img{width: 45px;height: 45px;display: block;}
.winners_content li span{width: 100%;height: 13px;margin-top: 8.5px;text-align: center;font-size: 11px;line-height: 13px;display: block;color: #333333;overflow: hidden;}
.winners_check{width: 100%;height: 11.5px;line-height: 11.5px;text-align: center;font-size: 14px;color: #999999;margin-top: 20px;}
</style>
